<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>密码找回</title>
    <link rel="icon" href="/image/favicon.ico" type="image/x-icon">
	<link rel="stylesheet" href="css/forgetPage.css">
</head>
<body>
<div id="all">
    <div id="head">
        <div class="mod-header">
            <a href="index.html"><img src="image/logo.png" alt="logo"></a>
        </div>
        <a id="user-login" href="index.html">登录</a>
    </div>
    <div id="nav">
        <div class="nav-2">
            <span class="nav-3">找回密码</span>
        </div>
    </div>
    <div id="content">
        <span id="tittle">请填写您需要找回的帐号时注册的邮箱号</span>
        <div id="code_text">
            <span class="tips-text" style="display: none" >邮箱格式错误</span>
            <ul>
                <li><input type="text" name="email" id="email" placeholder="请输入你的邮箱号" reguler="^([a-zA-Z0-9]{3,11})+@([a-zA-Z0-9]{2,3})+\.([A-Za-z]{2,3})$"></li>
                <li><input type="text" name="code" id="code" placeholder="请输入验证码"><input type="button" id="send" value="发送验证码"></li>
                <li><input type="button" id="next" value="下一步" disabled="disabled" ></li>
            </ul>
        </div>
        <div id="password_text" style="display: none">
            <ul>
                <li><input type="password" name="password" id="password" placeholder="请输入新密码"></li>
                <li><input type="password" name="password2" id="password2" placeholder="二次密码输入"></li>
                <li><input type="button" id="button" value="提交"></li>
            </ul>
        </div>
    </div>
</div>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/2.2.2/jquery.js"></script>
<script>

    $('#email').on('input',function (e){   //验证邮箱格式是否正确
        var email = $(this).attr('reguler');
        var reg = new RegExp(email);
        if(reg.test($(this).val())){
            $('.tips-text').hide();
        }
        else
            $('.tips-text').show();
    });
//发送验证码
    $('#send').click(function () {
        var code = $('#code').val('');
        if(code!=null){
            $.ajax({
                url:'/pan/sendCode',
                type:'post',
                data:{userEmail:$('#email').val()},
                success:function (e) {
                    if(e.message=='success'){
                        alert("发送成功");
                        //写入验证码执行
                        $('#code').on('input',function () {
                            $('#next').removeAttr("disabled");
                        });
                    }else if(e.message=="fails"){
                        alert("发送失败")
                    }else if(e.message=="null"){
                        alert("该邮箱不是邮箱号")
                        $('#email').val("");
                    }
                }
            })
        }else if(code==null){
            alert("邮箱号未填写，请输入");
        }
    });
//下一步
    $('#next').click(function () {
        $.ajax({
            url:'/pan/verificationCode',
            type:'post',
            data:{verificationCode:$('#code').val(),userEmail:$('#email').val()},
            success:function (a) {
                if(a.message=='success'){
                    $('#code_text').hide();
                    $('#password_text').show();
                }else if(a.message=='fails'){
                    alert('验证码错误')
                    $('#code').val("");
                }
            }
        })
    });

//提交要修改的密码
    $('#button').click(function () {
        var password = $('#password').val();
        var password2 = $('#password2').val();
        if(password==password2){
            $.ajax({
                url:'/pan/forgetPassword',
                type:'post',
                data:{newPassword:$('#password').val(),userEmail:$('#email').val()},
                success:function (c) {
                   if(c.message=='success'){
                       var r = confirm("密码找回成功是否去登录？");
                       if (r==true){
                           window.location.href="http://localhost/index.html";
                           $('#password').val('');
                           $('#password2').val('');
                       }
                   }else if(c.message=='fails'){
                       alert("修改失败")
                   }
                }
            });
        }else {
            alert("二次密码不同,重新输入");
            $('#password2').val('');
        }
    })

</script>
</body>
</html>